<template>
	<view class="schedule">
		<view class="list" v-if="list.length">
			<view
				class="item pr d-flex justify-space-between flex-column"
				v-for="item in list"
				:key="item.id"
			>
				<view class="flex-between">
					<view class="section">{{ item.name }}</view>
					<view class="status" style="font-size: 24rpx;">
						<view class="today pa flex-center" v-if="item.stauts === 1">今日上课</view>
						<view style="color: #EB4751;" v-if="item.stauts === 2">待上课</view>
						<view style="color: #EB4751;" v-else-if="item.stauts === 3">待预约</view>
						<view style="color: #999;" v-else-if="item.stauts === 4">已上课</view>
					</view>
				</view>
				
				<view style="margin-left: 20rpx;">
					<view v-if="item.date && item.time">
						<view class="date">{{ item.date }}</view>
						<view class="time">{{ item.time }}</view>
					</view>
					<view v-else class="time">
						暂未预约
						<view class="booking pa">
							<u-button text="立即预约" shape="circle" color="linear-gradient(0deg, #528EFF, #2F75FA)" customStyle="width: 174rpx; height: 60rpx;"></u-button>
						</view>
					</view>
				</view>	
				
				<view class="flex-align">
					<u-icon name="map-fill" color="#3b68ee"></u-icon>
					<view class="address">
						{{ item.address }}
					</view>
				</view>
			</view>
		</view>
		
		<u-empty v-else text="暂无数据" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
	</view>
</template>

<script>
export default {
	props: {
		list: Array
	},
	data() {
		return {
		}
	},

}
</script>

<style lang="scss" scoped>
.schedule {
	padding: 30rpx;
	
	.list {
		.item {
			border-radius: 20rpx;
			background: rgb(227,228,251);
			padding: 20rpx;
			height: 200rpx;
			
			& + .item {
				margin-top: 30rpx;
			}
			
			.section {
				background-color: rgba(85, 190, 243, 0.1);
				border-radius: 21rpx;
				padding: 9rpx 22rpx;
				color: #333333;
				font-size: 24rpx;
			}
			
			.today {
				right: 0;
				top: 15rpx;
				background: #FA4C4C;
				border-radius: 26rpx 0px 0px 26rpx;
				width: 144rpx;
				height: 52rpx;
				font-size: 26rpx;
				color: #fff;
			}
			
			.date {
				color: #999999;
				font-size: 22rpx;
			}
			
			.time {
				color: #333333;
				font-size: 26rpx;
			}
			
			.booking {
				right: 20rpx;
				bottom: 20rpx;
			}
			
			.address {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}
}
</style>